// canvas
var canvas = document.querySelector('canvas');
// 修改笔画大小
var select = document.querySelector('select');
// 修改颜色
var color = document.querySelector('input[type=color]');
// 保存
var save = document.querySelector('#down');
// 擦除
var ch = document.querySelector('#ch');
// 清空
var clear = document.querySelector('#clear');
// 下载
var a = document.querySelector('a');
// 矩形
var rect = document.querySelector('#rect');
// 点击上传
var upload = document.querySelector('#upload');
// 上传控件
var file = document.querySelector('#file');

// 设置宽度
canvas.width = document.documentElement.clientWidth - 20;

// 是否是擦除
var isCh = false;
// 是否是矩形
var isRect = false;
// 是矩形时的参数
var x = 0;
var y = 0;

var ctx = canvas.getContext('2d');
ctx.lineWidth = '1';

// 网页端
if (window.navigator.userAgent.indexOf('Mobile') == -1) {
	function move(e1) {
		// 不是擦除 不是矩形
		if (!isCh && !isRect) {
			ctx.lineTo(e1.pageX - this.offsetLeft, e1.pageY - this.offsetTop);
			ctx.stroke();
		} else if (isCh && !isRect) {
			// 是擦除 不是矩形
			ctx.clearRect(e1.pageX - this.offsetLeft, e1.pageY - this.offsetTop, 15, 20);
		}
	}
	canvas.addEventListener('mousedown', function (e) {
		ctx.beginPath();
		// 不是擦除 不是矩形
		if (!isCh && !isRect) {
			ctx.moveTo(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
			canvas.addEventListener('mousemove', move);
		} else if (isCh && !isRect) {
			// 是擦除 不是矩形
			canvas.addEventListener('mousemove', move);
		}
		// 是矩形
		if (isRect) {
			x = e.pageX - this.offsetLeft;
			y = e.pageY - this.offsetTop;
		}
	})
	canvas.addEventListener('mouseup', function (e) {
		// 是矩形
		if (isRect) {
			ctx.rect(x, y, e.pageX - this.offsetLeft - x, e.pageY - this.offsetTop - y)
			ctx.stroke();
		} else {
			// 不是矩形
			canvas.removeEventListener('mousemove', move);
		}
	})
	// 修改笔画大小
	select.addEventListener('change', function (e) {
		ctx.lineWidth = e.target.value;
	})
	// 修改颜色
	color.addEventListener('change', function (e) {
		ctx.strokeStyle = e.target.value;
	})
	// 保存并下载
	save.addEventListener('click', function () {
		a.href = canvas.toDataURL();
		a.click();
	})
	// 矩形
	rect.addEventListener('click', function () {
		isRect = !isRect;
		// 不是矩形
		if (!isRect) {
			this.style.backgroundColor = 'rgb(239, 239, 239)';
		} else {
			// 是矩形
			this.style.backgroundColor = 'red';
		}
		ctx.beginPath();
	})
	// 点击上传
	upload.addEventListener('click', function () {
		file.click();
	})
	file.addEventListener('change', function () {
		if (this.files.length >= 1) {
			var img = new Image();
			img.src = URL.createObjectURL(this.files[this.files.length - 1]);
			img.onload = function () {
				ctx.drawImage(img, 0, 0);
			}
		}
	})
	// 擦除
	ch.addEventListener('click', function () {
		isCh = !isCh;
		if (isRect) {
			isRect = !isRect;
		}
		// 不是擦除
		if (!isCh) {
			this.style.backgroundColor = 'rgb(239, 239, 239)';
			this.value = '开始擦除';
		} else {
			// 是擦除
			this.style.backgroundColor = 'red';
			this.value = '取消擦除';
		}
		// 不是矩形
		if (!isRect) {
			rect.style.backgroundColor = 'rgb(239, 239, 239)';
		} else {
			// 是矩形
			rect.style.backgroundColor = 'red';
		}
	})
	// 清空
	clear.addEventListener('click', function () {
		ctx.clearRect(0, 0, document.documentElement.clientWidth - 20, 550);
	})
} else {
	rect.disabled = true;
	upload.disabled = true;

	function move(e1) {
		// 不是擦除
		if (!isCh) {
			ctx.lineTo(e1.changedTouches[0].pageX - this.offsetLeft, e1.changedTouches[0].pageY - this.offsetTop);
			ctx.stroke();
		} else {
			// 是擦除
			ctx.clearRect(e1.changedTouches[0].pageX - this.offsetLeft, e1.changedTouches[0].pageY - this.offsetTop, 15, 15);
		}
	}
	canvas.addEventListener('touchstart', function (e) {
		ctx.beginPath();
		if (!isCh) {
			ctx.moveTo(e.changedTouches[0].pageX - this.offsetLeft, e.changedTouches[0].pageY - this.offsetTop);
		}
	})
	canvas.addEventListener('touchmove', move);
	// 修改画笔大小
	select.addEventListener('change', function (e) {
		ctx.lineWidth = e.target.value;
	})
	// 修改颜色
	color.addEventListener('change', function (e) {
		ctx.strokeStyle = e.target.value;
	})
	// 保存并下载
	save.addEventListener('touchstart', function () {
		a.href = canvas.toDataURL();
		a.click();
	})
	// 擦除
	ch.addEventListener('touchstart', function () {
		isCh = !isCh;
		// 不是擦除
		if (!isCh) {
			this.style.backgroundColor = 'rgb(239, 239, 239)';
			this.value = '开始擦除';
		} else {
			// 是擦除
			this.style.backgroundColor = 'red';
			this.value = '取消擦除';
		}
	})
	// 清空
	clear.addEventListener('touchstart', function () {
		ctx.clearRect(0, 0, document.documentElement.clientWidth - 20, 550);
	})
}